<template>
  <div class="film-top-bar">
    <div class="city-entry" @click='goCity'>
      <span v-if='currentCity.cname'>{{currentCity.cname}}</span>
      <span v-else>{{city}}</span>
      <i class="city-entry-arrow"></i>
    </div>
    <div class="switch-hot">
      <div class="hot-item" v-for='item in hotToggleData' :key='item.name' :class="{'active':hotActive===item.index}" @click="toggleHotItem(item.index)">{{item.name}}</div>
    </div>
    <div class="search-entry" @click="$router.push('search')">
      <icon name='search' scale='2.5'></icon>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      city: '北京',
      hotToggleData: [{name: '正在热映', index: 0}, {name: '即将上映', index: 1}],
      hotActive: 0
    }
  },
  props: {
    currentCity: Object
  },
  methods: {
    goCity () {
      this.$router.push('/city')
    },
    toggleHotItem (index) {
      this.hotActive = index
      this.$emit('toggleHotItem', this.hotActive)
    }
  }
}
</script>
<style lang='scss'>
.film-top-bar{
  position: relative;
  height: 90px;
  line-height: 90px;
  color: #666;
  font-size: 29px;
  border-bottom: 1px solid #e6e6e6;
  display: flex;
  flex-direction: row;
  .city-entry{
    flex: 1;
    padding-left: 20px;
    &-arrow{
      width: 0;
      height: 0;
      border: 9px solid #b0b0b0;
      border-left-color: transparent;
      border-right-color: transparent;
      border-bottom-color: transparent;
      display: inline-block;
      margin-top: 10px;
    }
  }
  .switch-hot{
    flex: 2;
    display: flex;
    .hot-item{
      flex: 1;
      text-align: center;
    }
    .active{
      color: #e54847;
      border-bottom: 3px solid #e54847;
    }
  }
  .search-entry{
    flex: 1;
    text-align: right;
    padding-right: 40px;
    padding-top: 12px;
  }
}
</style>
